<template>
    <div class="animated fadeInUp" style="min-height: 50rem;">
        <div>
            <!-- 博客主体-->
            <div class="blog_content_p">
                <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:blog.blogId}}"
                    class="blog_item_p animated pulse" v-for="(blog,index) in blogList" :key="index"
                    style="box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.05);">
                    <div class="img_content_p"
                        :style="$pcShow?'height: 20rem;width: 25%;margin: 0 15px;display: inline-block!important;':''">
                        <!-- <div class='cover'></div> -->
                        <img :key='nowTimes' v-lazy="blog.src" :onerror="errorUserPhoto" alt download>
                        <div class="blog_body_p">
                            <p style="line-height: 0px;font-weight: 600;">{{blog.title}} </p>
                            <p class='blog_text_p'>{{blog.body | formateVal(blog.body)}}</p>
                        </div>

                        <div class="blog_item_title_p">
                            <span style="font-size: 13px;padding-left: 27px;"><i class='iconfont icon-chakan'
                                    style="font-size: 15px;padding-right: 5px;"></i>{{blog.readcount}}</span>
                            <span style="padding-left: 10px;font-size: 13px;"><i class='iconfont icon-pinglun2'
                                    style="font-size: 13px;padding-right: 5px;"></i>{{blog.reviewsCount}}</span>
                            <span style="padding-left: 10px;font-size: 13px;"><i class='iconfont icon-icon-test'
                                    style="font-size: 13px;padding-right: 5px;"></i>{{blog.fabulousCount}}</span>

                            <span style="font-size: 13px;padding-left: 8px;">{{friendlyDate(blog.update_time)}}</span>
                            <span style="float: right;padding-right: 27px;">{{blog.userName}}</span>

                        </div>
                        <div class="blog_item_title_p" style="top: 5%;right:4%;text-align: right;">
                            <span style="background: #2d2d2d;padding: 0 6px;border-radius: 2px;">
                                {{blog.className}}</span></div>
                    </div>
                </router-link>
            </div>
        </div>
        <div v-if='!blogList'>
            快去写点儿博客吧~
        </div>
    </div>
</template>


<script>
import { mapGetters, mapActions } from "vuex";
import blog from "../../api/blog";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";

export default {
    name: "index",
    components: {
        Header,
        Footer
    },
    data() {
        return {
            blogList: [],
            animated: '',
            animatedIndex: null,
            nowTimes: new Date().getTime()
        };
    },
    created() {
        this.fnFindBlog()
    },
    methods: {
        ...mapActions(["login", "checkLogin", "logout", "getPermissions"]),
        async fnFindBlog() {
            try {
                let res = await blog.findCollectByUserName(this.$route.query.userName)
                if (res.data == '') return
                res.data.forEach(item => {
                   item.src = item.bgImg ? item.bgImg : this.$config.url.randomImgUrl+'?time=' + Math.random();
                    item.color = this.rgb();
                    item.creat_time = new Date(item.creat_time.split("T")[0]).getTime();
                })
                this.blogList = res.data
            } catch (err) {
                console.log(err)
                this.$message.error({ message: err.errorMsg })
            }
        },
        rgb() {
            var i = 0;
            var str = "#";
            var random = 0;
            var aryNum = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
            for (i = 0; i < 6; i++) {
                random = parseInt(Math.random() * 16);
                str += aryNum[random];
            }
            return str;
        },
        fnGoedit(blogId) {
            console.log(blogId)
            event.stopPropagation()
            let routeData = this.$router.resolve({ path: '/editBlog', query: { blogId } });
            window.open(routeData.href, '_blank');
        },
        fnGoDetail(blogId) {
            this.$router.push({ path: '/blogDetail', query: { blogId } })
        },
        enter(index) {
            this.animatedIndex = index
            this.animated = 'animated fadeIn faster'
        },
        leave(index) {
            this.animated = 'animated fadeOut faster'
        }
    },
    computed: {
        ...mapGetters(["isLogin", "user"])
    },
    filters: {
        formateVal(s) {
            var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
            var rs = "";
            for (var i = 0; i < s.length; i++) {
                rs = rs + s.substr(i, 1).replace(pattern, '');
            }
            rs = rs.toString();
            return rs.substring(0, 60) + "...";;
        },
        formateDate: function (value) {
            if (!value) return "";
            value = value.toString();
            var dateTime = value.split("T")[0];
            return new Date(dateTime).getTime();
        }
    }
};
</script>
<style lang="less">
// 下面是移动端的样式
.blog_content_p {
    width: 100%;
    margin-top: 6rem;
    .blog_item_p {
        position: relative;
        width: 100%;
        height: 100%;
        transition: all .3s;
        &:hover img {
            filter: blur(1px);
             transition: all .3s;
        }
        &:hover .blog_body_p {
            background: rgba(0, 0, 0, 0.5) !important;
             transition: all .3s;
        }
        .img_content_p {
            width: 100%;
            height: 15rem;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
            img {
                border-radius: 10px;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .blog_body_p {
                width: 100%;
                border-radius: 10px;
                height: 100%;
                top: 0;
                position: absolute;
                background: rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                .blog_text_p {
                    line-height: 22px;
                    width: 91%;
                    word-wrap: break-word;
                    color: #dcdcdc;
                }
            }
            .blog_item_title_p {
                line-height: 22px;
                position: absolute;
                color: rgb(255, 255, 255);
                top: 87%;
                width: 100%;
                text-align: left;
            }
        }
    }
}
</style>
<style lang="less" scoped>
@import "../../assets/css/auth.css";
.user_head {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 3rem;
    width: 43%;
    margin: 2rem auto;
    img {
        height: 5rem;
    }
    span {
        height: 5rem;
        font-size: 2rem;
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 2rem;
    }
}

.el-card {
    // transition:all .3s;
    box-shadow: none !important;
    &:hover {
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1) !important;
        //transition:all .3s;
    }
}
.el-card__body {
    position: relative !important;
}
.editBtn {
    position: absolute;
    top: 33px;
    right: 8px;
    background: #a274e8;
    color: white;
    width: 3.5rem;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
}
</style>

